import React, { PureComponent } from 'react'
import { connect, history } from '@umijs/max'
import {
 Checkbox, Form, message, Tooltip, Switch,
} from 'antd'
import { BreadcrumbBar, ProTable } from '@/components'
import { setCopy } from '@/components/CopyText'
import { getHashParameterByName } from '@/utils/helper'
import styles from './index.less'

const { Item } = Form
const descType = window.location.hash?.split('&type=')?.[1]
const calcMenu = () => {
  let str = ''
  if (descType === 'my') {
    str = '我的API'
  }
  if (descType === 'market') {
    str = 'API市场'
  }
  if (descType === 'apply') {
    str = '我的申请'
  }
  return str
}

const menus = [{ name: calcMenu() }, { name: 'API详情' }]
const paramOperatorArr = ['=', 'LIKE', 'IN', 'BETWEEN', '>', '<', '>=', '<=', '!=', 'NOT LIKE', 'NOT IN']

@connect(({ indexApiCreate }) => ({ ...indexApiCreate }))
class IndexApiDetail extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      requestParams: [], // 请求参数设置 数据源
      responseParams: [], // 返回参数设置 数据源
      pageable: 0,
    }
    this.dataSourceForm = React.createRef()
  }

  componentDidMount() {
    this.descId = getHashParameterByName('id')
    this.descType = getHashParameterByName('type')
    this.descId && this.viewDetail(this.descId)
  }

  // 查看详情
  viewDetail = (id) => {
    this.props.dispatch({
      type: 'indexApiCreate/queryGetDataApiDetailById',
      params: {
        id,
      },
      cb: (res) => {
        const { status, msg, data = {} } = res || {}
        if (status === 200) {
          const {
            apiName, apiPath, apiProtocol, apiMethod, authType, apiDesc, tableName, pageable, inputParamResponses, outputParamResponses,
            indexGroup, indexName, prodApiUrl, testApiUrl, apiGroup, isSecurity,
          } = data

          this.setState({
            apiName,
            apiPath,
            apiProtocol,
            apiMethod,
            authType,
            apiGroup,
            apiDesc,
            tableName,
            indexGroup,
            indexName,
            prodApiUrl,
            testApiUrl,
            pageable,
            requestParams: inputParamResponses,
            responseParams: outputParamResponses,
            isSecurity,
          })
        } else {
          message.error(msg || '服务端错误')
        }
      },
    })
  }

  goBack = () => {
    // console.log('this.descType', this.descType)
    if (this.descType === 'my') {
      history.push('/data-service/api-manage/my-api')
      return null
    }
    if (this.descType === 'market') {
      history.push('/data-service/api-market')
      return null
    }
    if (this.descType === 'apply') {
      history.push('/data-service/api-manage/my-apply')
      return null
    }
    return null
  }

  render() {
    const {
      requestParams, responseParams, pageable, apiName, apiPath, apiProtocol, apiMethod, authType, apiGroup, apiDesc, tableName,
      indexGroup, indexName, prodApiUrl, testApiUrl, isSecurity,
    } = this.state
    const req_param_columns = [
      {
        title: '参数名称',
        dataIndex: 'paramName',
        width: '10%',
        ellipsis: true,
        render: (paramName) => (paramName || '-'),
      },
      {
        title: '绑定字段',
        dataIndex: 'bindColumnName',
        width: '10%',
        ellipsis: true,
        render: (bindColumnName) => (bindColumnName || '-'),
      },
      {
        title: (
          <span>
            操作符
            <Tooltip
              placement="right"
              title={
                <div>
                  <p>操作符BETWEEN的传参方式为：aaa,bbb</p>
                </div>
              }
            >
              <i style={{ color: 'rgb(0, 132, 255)' }} className="iconfont icon-yiwentishi" />
            </Tooltip>
          </span>
        ),
        dataIndex: 'paramOperator',
        width: '10%',
        render: (text) => (
          paramOperatorArr[text] || '-'
        ),
      },
      {
        title: '参数类型',
        dataIndex: 'paramDataType',
        width: '10%',
        ellipsis: true,
        render: (paramDataType) => (paramDataType || '-'),
      },
      {
        title: '是否必填',
        width: '8%',
        dataIndex: 'paramRequire',
        render: (text) => (
          <Checkbox disabled checked={text === 1} />
        ),
      },
      {
        title: '示例值',
        width: '10%',
        dataIndex: 'exampleValue',
        ellipsis: true,
        render: (exampleValue) => (exampleValue || '-'),
      },
      {
        title: '默认值',
        width: '10%',
        dataIndex: 'defaultValue',
        ellipsis: true,
        render: (defaultValue) => (defaultValue || '-'),
      },
      {
        title: '描述',
        width: '10%',
        dataIndex: 'paramDesc',
        ellipsis: true,
        render: (paramDesc) => (paramDesc || '-'),
      },
    ]
    const res_param_columns = [
      {
        title: '参数名称',
        width: '10%',
        dataIndex: 'paramName',
        ellipsis: true,
        render: (paramName) => (paramName || '-'),
      },
      {
        title: '绑定字段',
        dataIndex: 'bindColumnName',
        width: '10%',
        ellipsis: true,
        render: (bindColumnName) => (bindColumnName || '-'),
      },
      {
        title: '参数类型',
        width: '10%',
        dataIndex: 'paramDataType',
        ellipsis: true,
        render: (paramDataType) => (paramDataType || '-'),
      },
      {
        title: '示例值',
        width: '10%',
        dataIndex: 'exampleValue',
        ellipsis: true,
        render: (exampleValue) => (exampleValue || '-'),
      },
      {
        title: '描述',
        width: '10%',
        dataIndex: 'paramDesc',
        ellipsis: true,
        render: (paramDesc) => (paramDesc || '-'),
      }]

    return (
      <div className={styles.my_api_create}>
        <BreadcrumbBar menu={menus} />
        <div className={styles.back_bar}>
          <i
            className="iconfont icon-zuo"
            onClick={this.goBack}
            style={{ cursor: 'pointer' }}
          />
          <span onClick={this.goBack}>查看</span>
        </div>
        <div className={styles.container}>
          <Form
            ref={this.dataSourceForm}
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 10 }}
            autoComplete="off"
          >
            <Item>
              <div className={styles.column}>基础设置</div>
            </Item>
            <Item
              label="API名称"
              name="apiName"
            >
              <div className={styles.cont}>{apiName || '-'}</div>
            </Item>
            <Item
              label="API Path"
              name="apiPath"
            >
              <div className={styles.cont}>
                {apiPath || '-'}
                {
                  apiPath && (<i
                    className="iconfont icon-fuzhi"
                    onClick={() => { setCopy(apiPath) }}
                  />)
                }
              </div>
            </Item>
            <Item
              label="API协议"
              name="apiProtocol"
            >
              <div className={styles.cont}>{['HTTP', 'HTTPS'][Number(apiProtocol)] || '-'}</div>
            </Item>
            <Item
              label="请求方式"
              name="apiMethod"
            >
              <div className={styles.cont}>{apiMethod || '-'}</div>
            </Item>
            <Item
              label="认证方式"
              name="authType"
            >
              <div className={styles.cont}>{authType == 1 ? 'UserToken认证' : 'ApiToken认证'}</div>
            </Item>
            <Item
              label="API测试路径"
              name="testApiUrl"
            >
              <div className={styles.cont} title={testApiUrl}>
                <span className={styles.text_overflow_single} style={{ width: '95%', display: 'inline-block', lineHeight: '0.2rem' }}>{testApiUrl || '-'}</span>
                {
                  testApiUrl && (<i
                    className="iconfont icon-fuzhi"
                    onClick={() => { setCopy(testApiUrl) }}
                  />)
                }
              </div>
            </Item>
            <Item
              label="API生产路径"
              name="prodApiUrl"
            >
              <div className={styles.cont} title={prodApiUrl}>
                <span className={styles.text_overflow_single} style={{ width: '95%', display: 'inline-block', lineHeight: '0.2rem' }}>{prodApiUrl || '-'}</span>
                {
                  prodApiUrl && (<i
                    className="iconfont icon-fuzhi"
                    onClick={() => { setCopy(prodApiUrl) }}
                  />)
                }
              </div>
            </Item>
            <Item
              label="API分组"
              name="apiGroupId"
            >
              <div className={styles.cont}>{apiGroup || '-'}</div>
            </Item>
            <Item
              label="出入参是否加密"
              name="isSecurity"
            >
              <Switch checked={!!isSecurity} disabled />
            </Item>
            <Item
              label="描述"
              name="apiDesc"
            >
              <div className={`${styles.cont} ${styles.height}`}>{apiDesc || '-'}</div>
            </Item>
            <Item>
              <div className={styles.column}>数据配置</div>
            </Item>
            <Item
              label="指标目录"
              name="indexId"
            >
              <div className={styles.cont}>{indexGroup || '-'}</div>
            </Item>
            <Item
              label="指标名称"
              name="name"
            >
              <div className={styles.cont}>{indexName || '-'}</div>
            </Item>
            <Item
              label="关联数据表"
              name="tableName"
            >
              <div className={styles.cont}>{tableName || '-'}</div>
            </Item>
            <Item
              label="请求参数设置"
              labelCol={{ span: 2 }}
              wrapperCol={{ span: 22 }}
              className={styles.sign}
            >
              <ProTable
                rowKey="bindColumnName"
                columns={req_param_columns}
                dataSource={requestParams}
                pagination={null}
              />
            </Item>
            <Item
              label="返回参数设置"
              labelCol={{ span: 2 }}
              wrapperCol={{ span: 22 }}
              className={styles.sign}
            >
              <ProTable
                rowKey="bindColumnName"
                columns={res_param_columns}
                dataSource={responseParams}
                pagination={null}
              />
            </Item>
            <Item
              label=" "
              colon={false}
              labelCol={{ span: 2 }}
              wrapperCol={{ span: 22 }}
            >
              <Checkbox
                checked={pageable === 1}
                disabled
              >
                返回结果分页
              </Checkbox>
            </Item>
          </Form>
        </div>
      </div>
    )
  }
}

export default IndexApiDetail
